import styled from "styled-components";

export const BannerWrapped = styled.div`
    height:285px;
    background:url(${(props=>props.bgImgURL)}) center/6000px;
  .banner{
  display:flex;
  height:283px;
  position:relative;
  }
`;
export const BannerLeft = styled.div`
  width:730px;
  .banner-item{
    height:285px;
    overflow:hidden;
    img{
      width:100%;
      height:100%;
    }
  }
  .ant-carousel{
    .slick-dots-bottom{
       margin-bottom:10px;
      li button{
        width:20px;
        height:20px;
        background-color:transparent;
        background:url(${require("@/assets/image/banner.png")});
        background-position:3px -343px;
        transition:all 0s;
      }
      li.slick-active button,li:hover button{
        background-position:16px -343px;
      }
    }
  }
`;
export const BannerRight = styled.div`
  height:285px;
  width:250px;
  background:url(${require("@/assets/image/download.png")});
  
  .download{
    display:block;
    margin:186px 0 0 19px;
    background:url(${require("@/assets/image/download.png")});
    background-position:0px -290px;
    height:56px;
    width:215px;
    opacity:0;
    text-indent:-9999px;
    &:hover{
      opacity:1;
    }
  }
`;
export const BannerControl = styled.div`
    a{
    position:absolute;
    height:63px;
    width:37px;
      top:142.5px;
      margin-top:-31px;
      background:url(${require("@/assets/image/banner.png")});
      text-indent:-99999px;
      &.banner-left{
        left:-68px;
        background-position:0 -360px;
        &:hover{
          background-position:0 -430px;
        }
      }
      &.banner-right{
        right:-68px;
        background-position:0 -508px;
        &:hover{
          background-position:0 -578px;
        }
      }
    }
`;
